<template>
<div>
  <div id="swiper-img">
    <div v-for="(item,index) in showImages" v-show="n == index"  @mouseout="stop" @mouseover="start" class="item">
        <img :src="item" alt="item" >
    </div>
    <div v-for="(item,index) in showImages" v-show="n == index"  @mouseout="stop" @mouseover="start" class="item">
    </div>
    <div class="page">
      <ul>
        <li  v-for="(item,index) in showImages" :class="n == index ? 'active' : '' " ></li>
      </ul>
    </div>

  </div>
  </div>
</template>

<script>
export default {
  name: "DetailSwrper",
  props:{
    showImages:{
      type:Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      n:0,
      interId:null
    }
  },
  methods:{
    go () {
      this.interId = setInterval( n =>{
        if (this.n<this.showImages.length-1){
          this.n++
        }else {
          this.n=0;
        }
        // console.log(this.images);
      },3000 )
    },
    stop (){
      clearInterval(this.interId);
    },
    start () {
      this.go()
    }
  },
  mounted() {
    // console.log(this.showImages);
    this.go()
  }

}
</script>

<style scoped>
img{
  width: 100%;
  height:400px ;
}
#swiper-img{
  position: relative;
  display: flex;
  flex-direction:column

}
.page{
  display: flex;
  position: absolute;
  bottom: 15px;
  align-self: center;
}
ul{
  display: flex;
  text-align: center;
  opacity: 1;
}
li{
  width: 15px;
  flex:1;
}
.active{
  color:deeppink;
}

</style>